<template>
  <section>
    <div class="model management">
      <img :src="IMGBASE64.JIAOSHXINXIIGUANLI2X" class="pink">
    	<span class="title">教学楼设置</span>
      <div class="right">
        <el-button type="success" @click="newAdd" size="small">新建</el-button>
      </div>
    	<div class="kong"></div>
    	<template>
    		<el-table :data="teacherData" style="width: 100%" @cell-click="showDetails">
          <el-table-column prop="value" label="#"  align="center"></el-table-column>
    			<el-table-column prop="modelId" label="教学楼"  align="center"></el-table-column>
    			<el-table-column prop="group" label="创建人" align="center" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column prop="groupCode" label="创建时间" align="center"></el-table-column>
    			<el-table-column label="操作" align="center">
    				<template scope="scope">
    					<el-button type="text" size="small" @click="changeData(scope)">修改</el-button>
              <el-button type="text" size="small" @click="deleteData(scope)">删除</el-button>
    				</template>
    			</el-table-column>
    		</el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
    	</template>
    </div>

    <div class="up" v-show="newShow">
      <img :src="IMGBASE64.GREENXINZENG2X" class="img">
      <span class="title">新增教学楼</span>
      <el-button icon="close" class="close" @click="newAdd"></el-button>
      <header>
        <span class="header-title">基本信息</span>
      </header>
      <div class="form">
        <div class="content">
          <div class="row">
            <span>教学路名称:</span>
            <input type="text" v-model="name" class="text">
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="right">
          <el-button type="success" @click="addData()">确定</el-button>
        </div>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="anShow"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      newShow: false,
      anShow: false,
      total: 0,
      page: 1,
      paging: true,
      teacherData: [{
        value: '1',
        modelId: '一号楼',
        group: '欧阳俊逸',
        groupCode: '2017-01-01 01:01:01'
      },
      {
        value: '2',
        modelId: '二号楼',
        group: '欧阳俊逸',
        groupCode: '2017-01-01 01:01:01'
      },
      {
        value: '3',
        modelId: '三号楼',
        group: '欧阳俊逸',
        groupCode: '2017-01-01 01:01:01'
      }]
    }
  },
  mounted () {

  },
  methods: {
    handleCurrentChange (val) {
      this.page = val
      // this.getTeacherNameData()
    },
    showDetails (rows, column) {
      // if (column.label !== '操作') {
      //   this.detailsForm.name = rows.name
      //   this.detailsForm.mobile = rows.mobile
      //   this.detailsForm.idNo = rows.idNo
      //   this.detailsForm.grade = rows.grade
      //   this.detailsForm.subject = rows.subject
      //   this.detailsForm.id = rows.type2
      //   this.detailsForm.homeAddr = rows.homeAddr
      //   this.isDetails = !this.isDetails
      //   this.isSuccess = !this.isSuccess
      // }
    },
    newAdd () {
      this.newShow = !this.newShow
      this.anShow = !this.anShow
      this.name = null
    },
    addData () {},
    changeData () {},
    deleteData () {}
  }
}
</script>

<style lang="less" scoped>
	.management{
    .right{
      float: right;
      margin-right: 20px;
    }
  }
  .up{
    width: 35%;
    position: absolute;
    top: 10%;
    left: 50%;
    margin-left: -18%;
    background: #FFF;
    padding: 20px 20px 0 20px;
    border-radius: 5px;
    z-index: 99999;
    .img{
      position: absolute;
      left: 24px;
      top: -20px;
    }
    .title{
      margin-left: 90px;
    }
    header{
      height: 24px;
      border-bottom: 2px solid #D7D7D7;
      padding: 15px 0 10px 0;
      margin-left: 1%;
      margin-right: 10px;
      margin-bottom: 10px;
      .header-title{
        height: 24px;
        display: inline-block;
        color: #FB7862;
        border-bottom: 2px solid #FB7862;
        padding: 0 10px 10px 10px;
        margin-left: 0;
      }
    }
    .row{
      padding: 10px;
      .text{
        border: 0;
        border-bottom: 1px solid #d7d7d7;
      }
    }
  }
</style>
